<div id="vue-app" class="flex-container">
  <div class="form-container">
    <div class="client-selector">
      <button
        v-for="form in forms"
        :class="{ selected: current == form.key }"
        @click="select(form.key)"
      >{{form.label}}</button>
    </div>
    <div class="forms">
      <div class="public form">
        <label>
          <span>name</span>
          <ppz-input v-model="publicForm.name" />
        </label>
      </div>
      <template v-for="form in forms">
        <div class="private form" v-show="form.key == current">
          <label v-for="field in form.fields">
            <span>{{field.required?'*':''}} {{field.name}}</span>
            <file-input v-if="field.type == 'file'" v-model="field.value"></file-input>
            <ppz-input v-else v-model="field.value">
          </label>
        </div>
      </template>
    </div>
  </div>
  <div class="form-btns">
    <button @click="save(true)">保存并连接</button>
    <button @click="save()">保存</button>
  </div>
</div>

<div style="position: fixed; right: 1em; bottom: .6em; opacity: .6; font-size: .8em;">*目前 SQLite3 仅支持 windows</div>